<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>图片裁剪</title>
	</head>
	<style>
		
	
	</style>
	<style>
		  .cropper-clip {
		    z-index: 999;
		    position: absolute;
		    cursor: all-scroll;
			width: 100px;
			height: 100px;
		    border: 1px solid rgb(30, 158, 251);
		  }
		  
		  .dot {
		    width: 10px;
		    height: 10px;
		    border-radius: 50%;
		    background: #1e9efb;
		    position: absolute;
		  }
		
		  .topleft {
			z-index: 999;
		    top: -5px;
		    left: -5px;
		    cursor: nwse-resize;
		  }
		
		  .topright {
			z-index: 999;
		    top: -5px;
		    right: -5px;
		    cursor: nesw-resize;
		  }
		
		  .topcenter {
			z-index: 999;
		    top: -5px;
		    left: 50%;
		    transform: translateX(-50%);
		    cursor: ns-resize;
		  }
		
		  .bottomcenter {
			z-index: 999;
		    bottom: -5px;
		    left: 50%;
		    transform: translateX(-50%);
		    cursor: ns-resize;
		  }
		
		  .bottomleft {
			z-index: 999;
		    bottom: -5px;
		    left: -5px;
		    cursor: nesw-resize;
		  }
		
		  .bottomright {
		    bottom: -5px;
		    right: -5px;
		    cursor: nwse-resize;
		  }
		
		  .leftcenter {
			z-index: 999;
		    top: 50%;
		    transform: translateY(-50%);
		    left: -5px;
		    cursor: ew-resize;
		  }
		
		  .rightcenter {
			 z-index: 999;
		    top: 50%;
		    transform: translateY(-50%);
		    right: -5px;
		    cursor: ew-resize;
		  }
	</style>

	<body>
		<div style="position: relative;">
			<div class="cropper-clip" style="position:absolute" id="cropper">
			  <div class="dot topleft"></div>
			  <div class="dot topright"></div>
			  <div class="dot topcenter"></div>
			  <div class="dot bottomleft"></div>
			  <div class="dot bottomcenter"></div>
			  <div class="dot bottomright"></div>
			  <div class="dot leftcenter"></div>
			  <div class="dot rightcenter"></div>
			</div>
			
		</div>
		
		<img src="../img/background-2.jpg" id="image"/>
		
		<canvas id="canvas"></canvas>
		
		<img id="image-src" style="width: 100px;height: 100px;background-color: aqua;"/>
		
		
		<button onclick="getImage()">获取图片</button>

		<script>
				  var image=document.getElementById("image");
			      var canvas = document.getElementById("canvas");
			      var ctx = canvas.getContext("2d");
				  
				  var cropper=document.getElementById('cropper');
				  
			      var resizableDiv = document.querySelector(".rightcenter");
				  
				  
				  
			      resizableDiv.addEventListener("mousedown", function(e) {
			        e.preventDefault(); // 阻止默认事件，避免选中文字等操作
			        resizing = true;
			        startX = e.clientX;
			        startY = e.clientY;
			        startWidth = parseInt(document.defaultView.getComputedStyle(cropper).width, 10);
			        startHeight = parseInt(document.defaultView.getComputedStyle(cropper).height, 10);
					
			        document.addEventListener("mousemove", resizeElement);
			        document.addEventListener("mouseup", stopResize);
			      });
			
			      function resizeElement(e) {
			        if (resizing) {
			          var width = startWidth + e.clientX - startX;
			          var height = startHeight + e.clientY - startY;
					  cropper.style.width=width + "px";
					  cropper.style.height=height + "px";
			        }
			      }
			
			      function stopResize() {
			        resizing = false;
			        document.removeEventListener("mousemove", resizeElement);
			        document.removeEventListener("mouseup", stopResize);
			      }
				  
					
					image.onload = function (){
						ctx.drawImage(image, 0, 0, canvas.width, canvas.height);
					}
				  
				  function getImage(){
					  console.log(cropper.style.width,cropper.style.height)
					   canvas.width=cropper.style.width;
					   canvas.height=cropper.style.height;
					
					 // console.log(url);	
					  ctx.drawImage(image, 0, 0, canvas.width, canvas.height);
					    let url = canvas.toDataURL();
						console.log(url);
					  document.getElementById("image-src").setAttribute("src",url);
					 
				  }
			  
		</script>
	</body>
</html>